<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-14 16:27:26
 * @Description: file content
 * @FilePath: \ebook\src\components\shelf\ShelfSearch.vue
-->
<template>
  <div class="shelf-search-wrapper" ref="shelfSearchWrapper" :class="{'search-top':ifInputClicked,'hide-shadow':ifHideShadow}">
    <div class="shelf-search" :class="{'search-top':ifInputClicked}">
      <div class="search-wrapper">
        <div class="icon-search-wrapper">
          <span class="icon-search icon"></span>
        </div>
        <div class="search-input-wrapper">
          <input type="text" :placeholder="$t('shelf.search')" v-model="searchText" class="search-input" @click="onSearchClick" @keyup.enter.exact="search">
        </div>
        <div class="icon-clear-wrapper" v-show="searchText.length>0" @click="clearSearchText">
          <span class="icon-close-circle-fill"></span>
        </div>
      </div>
      <div class="icon-locale-wrapper" v-if="!ifInputClicked" @click="switchLocale">
        <span class="icon-cn icon" v-if="lang==='cn'"></span>
        <span class="icon-en icon" v-else></span>
      </div>
      <div class="cancel-btn-wrapper" @click="onCancelClick" v-else>
        <span class="cancel-text">{{$t('shelf.cancel')}}</span>
      </div>
    </div>
    <transition name="hot-search-move">
      <div class="shelf-search-tab-wrapper" v-if="ifInputClicked">
        <div class="shelf-search-tab-item" v-for="item in tabs" :key="item.id" @click="onTabClick(item.id)">
          <span class="shelf-search-tab-text" :class="{'isSelected':item.id===selectedTab}">{{item.text}}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { setLocalStorage } from '@/utils/localStorage'
import { storeShelfMixin } from '../../utils/mixin'

export default {
  mixins: [storeShelfMixin],
  computed: {
    lang () {
      return this.$i18n.locale
    },
    tabs () {
      return [
        {
          id: 1,
          text: this.$t('shelf.default')
        },
        {
          id: 2,
          text: this.$t('shelf.private')
        }
      ]
    }
  },
  data () {
    return {
      ifInputClicked: false,
      searchText: '',
      selectedTab: 1,
      ifHideShadow: true,
      screenWidth: null
    }
  },
  mounted () {
    // 获取屏幕尺寸
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      console.log('高度')
      // 屏幕尺寸变化
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  watch: {
    offsetY (offsetY) {
      if (offsetY > 0 && this.ifInputClicked) {
        this.ifHideShadow = false
      } else {
        this.ifHideShadow = true
      }
    },
    screenWidth: function (n, o) {
      if (n > 1332) {
        this.$refs.shelfSearchWrapper.style.width = '1332px'
      }
    }
  },
  methods: {
    search () {
    },
    onTabClick (id) {
      this.selectedTab = id
      if (id === 1) {
        this.setShelfType(1)
      } else if (id === 2) {
        this.setShelfType(2)
      }
      setTimeout(() => {
        this.onCancelClick()
      }, 500)
    },
    onSearchClick () {
      this.ifInputClicked = true
      this.setShelfTitleVisible(false)
    },
    onCancelClick () {
      this.ifInputClicked = false
      this.setShelfTitleVisible(true)
    },
    switchLocale () {
      if (this.lang === 'en') {
        this.$i18n.locale = 'cn'
      } else {
        this.$i18n.locale = 'en'
      }
      setLocalStorage('locale', this.$i18n.locale)
    },
    clearSearchText () {
      this.searchText = ''
    }
  }
}
</script>

<style lang="scss">
  .shelf-search-wrapper{
    position: relative;
    z-index: 105;
    width: 100%;
    height: px2rem(94);
    font-size: px2rem(16);
    background: white;
    margin: 0 auto;
    &.hide-shadow{
      box-shadow: none;
    }
    &.search-top{
      position: fixed;
      top: 0;
    }
    .shelf-search{
      position: absolute;
      top: px2rem(42);
      left: 0;
      z-index: 105;
      display: flex;
      width: 100%;
      height: px2rem(52);
      transition: top $animationTime linear;
      &.search-top{
        top: 0;
      }
      .search-wrapper{
        flex: 1;
        display: flex;
        margin: px2rem(8) 0 px2rem(8) px2rem(10);
        border: px2rem(1) solid #ccc;
        border-radius: px2rem(3);
        .icon-search-wrapper{
          flex: 0 0 px2rem(22);
          @include right;
          .icon-search{
            font-size: px2rem(12);
          }
        }
        .search-input-wrapper{
          flex: 1;
          padding: 0 px2rem(0);
          box-sizing: border-box;
          @include center;
          .search-input{
            width: 100%;
            font-size: px2rem(14);
            border: none;
            color: #333;
            padding-left: px2rem(10);
            &:focus{
              outline: none;
            }
            &::-webkit-input-placeholder{
              font-size: px2rem(14);
              color: #ccc;
            }
          }
        }
        .icon-clear-wrapper{
          flex: 0 0 px2rem(24);
          @include left;
          .icon-close-circle-fill{
            font-size: px2rem(14);
            color: #ccc;
          }
        }
      }
      .icon-locale-wrapper{
        cursor: pointer;
        flex: 0 0 px2rem(55);
        @include center;
        .icon-cn,.icon-en{
          font-size: px2rem(22);
          color: #666;
        }
      }
      @media only screen and (max-width: 767px) {
        .icon-locale-wrapper{
          display: none;
        }
      }
      .cancel-btn-wrapper{
        cursor: pointer;
        flex: 0 0 px2rem(55);
        @include center;
        .cancel-text{
          font-size: px2rem(14);
          color: $color-blue;
        }
      }
    }
    .shelf-search-tab-wrapper{
      position: absolute;
      top: px2rem(52);
      left: 0;
      z-index: 105;
      display: flex;
      width: 100%;
      height: px2rem(42);
      .shelf-search-tab-item{
        flex: 1;
        @include center;
        .shelf-search-tab-text{
          font-size: px2rem(12);
          color: #999;
          &.isSelected{
            color: $color-blue;
          }
        }
      }
    }
  }

</style>
